<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="preload" href="@/resources/assets/fonts/HYShangWeiShouShuW.ttf" as="font">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body style="width: 500px; height: 500px;">
  <div class="zhen">我的阵法</div>
  <div class="container" style="background-color: rgba(76, 70, 38, 0.7);">
    <div class="dataList">
      <div class="data">
        <div>{{Zhen[0]}}</div>
        <div class="bottom-center" style="color: rgb(92, 173, 193); font-size: 14px; opacity: 0.9;">壹</div>

      </div>
      <div class="data">
        <div>{{Zhen[1]}}</div>
        <div class="bottom-center" style="color: rgb(92, 173, 193); font-size: 14px; opacity: 0.9;">贰</div>
      </div>
      <div class="data">
        <div>{{Zhen[2]}}</div>
        <div class="bottom-center" style="color: rgb(92, 173, 193); font-size: 14px; opacity: 0.9;">叁</div>
      </div>
      <div class="data">
        <div>{{Zhen[3]}}</div>
        <div class="bottom-center" style="color: rgb(92, 173, 193); font-size: 14px; opacity: 0.9;">肆</div>
      </div>
      <div class="data">
        <div>{{Zhen[4]}}</div>
        <div class="bottom-center" style="color: rgb(215, 23, 23); font-size: 14px; opacity: 0.9;">伍</div>
      </div>
      <div class="data">
        <div>{{Zhen[5]}}</div>
        <div class="bottom-center" style="color: rgb(92, 173, 193); font-size: 14px; opacity: 0.9;">陆</div>
      </div>
      <div class="data">
        <div>{{Zhen[6]}}</div>
        <div class="bottom-center" style="color: rgb(92, 173, 193); font-size: 14px; opacity: 0.9;">柒</div>
      </div>
      <div class="data">
        <div>{{Zhen[7]}}</div>
        <div class="bottom-center" style="color: rgb(92, 173, 193); font-size: 14px; opacity: 0.9;">捌</div>
      </div>
      <div class="data">
        <div>{{Zhen[8]}}</div>
        <div class="bottom-center" style="color:rgb(92, 173, 193); font-size: 14px; opacity: 0.9;">玖</div>
      </div>
    </div>
  </div>
</body>

<style>


@font-face {
    font-family: 'MyFont';
    src: url("@/resources/assets/fonts/HYShangWeiShouShuW.ttf");
} 

body {
  font-family: "MyFont";
}


.container {
    border: 10px double rgba(0, 0, 0, 0.989);
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}


.dataList .data {
    background: linear-gradient(to bottom, rgba(85, 85, 85, 0.7), rgba(0, 0, 0, 0.7));
}


  body {
    transform: scale(1);
    background: url('@/resources/assets/img/zhen/zhen.png');
    background-size: 65% auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  * {
    padding: 0;
    margin: 0;
  }

  .container {
    width: calc(80px * 3 + 20px * 2);
    height: calc(80px * 3 + 20px * 2);
    padding: 20px;
    border-radius:20px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position:relative;
    top:-10px;
}


.data {
width :80px ;
height :80px ;
display :inline-block ;
padding :10px ;
text-align :center ;
box-sizing :border-box ;
border-radius :20px ;
background :rgba(78,79,81,0.7) ;
position:relative;
}

.data .bottom-center {
position:absolute;
bottom:0;
left:50%;
transform:translateX(-50%);
}

.zhen {
font-family: 'MyFont';
color: #fff;
font-size: 42px;
width: 70%;
border-radius: 20px;
text-align: center;
margin: auto;
background: rgba(78, 79, 81, 0.7);
font-weight: 900;
}


.dataList {
width :100% ;
height :100% ;
display :grid ;
grid-template-columns :repeat(3,1fr) ;
justify-content :center ;
grid-row-gap :5px ;
grid-column-gap :5px ;
}

.dataList .data div {
color:#fff;
font-size:20px;
line-height:20px;
display:flex;
align-items:center;
justify-content:center;
}

.dataList .data:nth-child(5) div {
color:rgb(255,215,0);
}

.dataList .data:nth-child(1) div {
color:rgb(192,192,192);
}
.dataList .data:nth-child(2) div {
color:rgb(192,192,192);
}
.dataList .data:nth-child(3) div {
color:rgb(192,192,192);
}
.dataList .data:nth-child(4) div {
color:rgb(192,192,192);
}
.dataList .data:nth-child(6) div {
color:rgb(192,192,192);
}
.dataList .data:nth-child(7) div {
color:rgb(192,192,192);
}
.dataList .data:nth-child(8) div {
color:rgb(192,192,192);
}
.dataList .data:nth-child(9) div {
color:rgb(192,192,192);
}

.bottom-center {
    color: darkgoldenrod;
    font-size: 14px;
}

</style>

</html>
